<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="8">
          <el-form ref="info" label-width="80" label-position="top" :rules="rules" :model="info">
            <el-form-item label="网站名称" prop="name" :rules="[{ required: true, message: '请输入网站名称', trigger: 'blur' }]">
              <el-input v-model="info.name"></el-input>
            </el-form-item>
            <el-form-item label="网站描述" prop="desc" :rules="[{ required: true, message: '请输入网站描述', trigger: 'blur' }]">
              <el-input v-model="info.desc"></el-input>
            </el-form-item>
            <el-form-item label="网站Description" prop="desc" :rules="[{ required: true, message: '请输入网站description', trigger: 'blur' }]">
              <el-input v-model="info.descript"></el-input>
            </el-form-item>
            <el-form-item label="网站Keyword" prop="desc" :rules="[{ required: true, message: '请输入网站keyword', trigger: 'blur' }]">
              <el-input v-model="info.keyword"></el-input>
            </el-form-item>
            <el-form-item label="所属公司" prop="company" :rules="[{ required: true, message: '请输入所属公司', trigger: 'blur' }]">
              <el-input v-model="info.company"></el-input>
            </el-form-item>
            <el-form-item label="负责人" prop="principal" :rules="[{ required: true, message: '请输入负责人', trigger: 'blur' }]">
              <el-input v-model="info.principal"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email" :rules="[{ required: true, message: '请输入邮箱', trigger: 'blur' }]">
              <el-input v-model="info.email"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone" :rules="[{ required: true, message: '请输入联系电话', trigger: 'blur' }]">
              <el-input v-model="info.phone"></el-input>
            </el-form-item>
            <el-form-item label="地图经纬点：" prop="phone" :rules="[{ required: true, message: '请输入地图经纬点', trigger: 'blur' }]">
              <el-input v-model="info.address"></el-input>
            </el-form-item>
            <el-form-item label="微信联系人" prop="phone" :rules="[{ required: true, message: '微信联系人', trigger: 'blur' }]">
                <input type="hidden" v-model="info.image"/>
                <el-row>
                  <el-col>
                    <el-upload
                      ref="upload1"
                      name="image"
                      :auto-upload="true"
                      :multiple="false"
                      :limit="1"
                      :data="{url: info.wximg}"
                      :on-success="uploadAfter1"
                      :before-upload="updateImageShow(false)"
                      :action="page.uploadUrl"
                      list-type="picture-card">
                      <img :src="info.wximg" width="150px" height="150px" style="border-radius: 8px;"/>
                    </el-upload>
                  </el-col>
                </el-row>
            </el-form-item>

            <el-form-item label="QQ联系人" prop="phone" :rules="[{ required: true, message: '微信联系人', trigger: 'blur' }]">
                <input type="hidden" v-model="info.image"/>
                <el-row>
                  <el-col>
                    <el-upload
                      ref="upload2"
                      name="image"
                      :auto-upload="true"
                      :multiple="false"
                      :limit="1"
                      :data="{url: info.image}"
                      :on-success="uploadAfter2"
                      :before-upload="updateImageShow(false)"
                      :action="page.uploadUrl"
                      list-type="picture-card">
                      <img :src="info.qqimg" width="150px" height="150px" style="border-radius: 8px;"/>
                    </el-upload>
                  </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="备案号">
              <el-input v-model="info.caseNumber"></el-input>
            </el-form-item>
            <el-form-item label="每页显示数量" prop="count" :rules="[{ required: true, message: '请输入每页显示数量', trigger: 'blur' }]">
              <el-input v-model="info.count"></el-input>
            </el-form-item>
            <el-form-item label="公司图片" prop="image" :rules="[{required: true, message: '请选择内容封面', trigger: 'blur'}]">
              <input type="hidden" v-model="info.image"/>
              <el-row>
                <el-col>
                  <el-upload
                    ref="upload3"
                    name="image"
                    :auto-upload="true"
                    :multiple="false"
                    :limit="1"
                    :data="{url: info.image}"
                    :on-success="uploadAfter3"
                    :before-upload="updateImageShow(false)"
                    :action="page.uploadUrl"
                    list-type="picture-card">
                    <img :src="info.image" width="150px" height="150px" style="border-radius: 8px;"/>
                  </el-upload>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button @click="update" type="success">保 存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import { get, update } from '@/api/info'
export default {
  name: "WebInfo",
  data () {
    return {
      info: {
        name: null,
        desc: null,
        company: null,
        email: null,
        principal: null,
        phone: null,
        caseNumber: null,
        descript: null,
        keyword: null,
        image: null,
        count: null
      },
      rules:{

      },
      page: {
        uploadUrl: process.env.VUE_APP_BASE_API + '/image',
        editable: true
      }
    }
  },
  methods: {
    updateImageShow (show) {
      this.page.showImage = show
    },
    update () {
      console.log(this.page.uploadUrl)
      // this.$refs.upload.submit()
      this.$refs['info'].validate((valid) => {
        if (valid) {
          update(this.info).then( res => {
            this.info = res.data
            this.page.editable = true
            this.$message.success('修改成功')
            // this.$router.go(0)
          }).catch(err => console.log(err))
        }
      });
    },
    get () {
      get(null).then( res => {
        this.info = res.data
      }).catch( err => console.log(err))
    },
     uploadAfter1 (res) {
      console.log(res)
      if (res.code === 20000) {
        this.info.wximg = res.data.url;
      } else {
        this.$message.error('图片上传失败')
      }
    },
    uploadAfter2 (res) {
      console.log(res)
      if (res.code === 20000) {
        this.info.qqimg = res.data.url;
      } else {
        this.$message.error('图片上传失败')
      }
    },
    uploadAfter3 (res) {
      console.log(res)
      if (res.code === 20000) {
        this.info.image = res.data.url;
      } else {
        this.$message.error('图片上传失败')
      }
    }
  },
  mounted () {
    this.get()
  }
}
</script>

<style scoped>

</style>
